<template>
    <li class="item-content">
        <div class="item-inner">
            <div class="item-input">
                <input id="picker-device"
                       :value="msg"
                       type="text"
                       :placeholder="item.placeholder"
                       :maxlength="item.total"
                       @input="onInput">
            </div>
            <div class="item-title label placeholder">{{ limit }}/{{item.total}}</div>
        </div>
    </li>
</template>

<script type="text/javascript">
import store from '../store/index'
export default {
    name: "list-input",
    data() {
        return {
            msg: this.item.displaycon
        }
    },
    props: {
        item: {
            type: Object,
            default: function () {
                return {
                    limit: 0,
                    total: 15,
                    type: 'text',
                    placeholder: '请输入信息',
                    displaycon: '',
                    pageName: 'forum-page',
                }
            }
        },
        nextState: {
            type: Object,
            default: function () {
                return {
                    key: 'name',
                    dispatch: 'myCurrentPosition'
                }
            }
        }
    },
    methods: {
        onInput(ev) {
            const vm = this
            vm.msg = $$(event.target.tagName).val() //保留原始输入值
            if (vm.msg) store.dispatch(vm.nextState.dispatch, {
                [vm.nextState.key]: vm.msg
            })
        }
    },
    mounted() {
        const vm = this
        if (vm.item.key == 'sex') {
            var pickerDevice = myApp.picker({
                input: '#picker-device',
                cols: [{
                    textAlign: 'center',
                    values: ['男', '女'],
                    displayValues: ['男', '女']
                }],
                onChange: function (picker, values, displayValues) {
                    console.log(picker, values, displayValues)
                    const val = (values == '男') ? true : false
                    store.dispatch(vm.nextState.dispatch, {
                        [vm.nextState.key]: val
                    })
                }
            });
        }
    },
    computed: {
        limit() {
            return (this.msg ? this.msg.length : 0)
        }
    }

}
</script>